<template>
  <div class="main1">
        <el-card>
            <h4>欢迎注册！请选择角色</h4>
            <el-button class="el-button1" @click="pdrawer = true" type="text" icon="el-icon-user-solid">用户注册</el-button>
            <el-button class="el-button2" @click="gdrawer = true" type="text" icon="el-icon-s-custom">管理者注册</el-button>
            <el-link href="http://localhost:8080/#/login" target="_blank">登录</el-link>
        </el-card>

        <el-drawer class="drawer" :visible.sync="pdrawer" :with-header="false" size="40%">
            <span class="span">用户注册!</span>
            <!-- 内容主体区 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
                <el-form-item label="账号" prop="useraccount">
                <el-input v-model="addForm.useraccount"></el-input>
                </el-form-item>
                <el-form-item label="名字" prop="userrname">
                <el-input v-model="addForm.userrname"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="userid">
                <el-input v-model="addForm.userid"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="usernumber">
                <el-input v-model="addForm.usernumber"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="userpassword">
                <el-input v-model="addForm.userpassword"></el-input>
                </el-form-item>
                <el-form-item label="个性签名" prop="usersignature">
                <el-input v-model="addForm.usersignature"></el-input>
                </el-form-item>
            </el-form>
                <!-- 底部区 -->
                <el-button class="button3" type="primary" @click="addpUserInfo">确 定</el-button>
        </el-drawer>

        <el-drawer class="drawer" :visible.sync="gdrawer" :with-header="false" size="40%">
            <span class="span">管理者注册!</span>
            <!-- 内容主体区 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="140px">
                <el-form-item label="账号" prop="useraccount">
                <el-input v-model="addForm.useraccount"></el-input>
                </el-form-item>
                <el-form-item label="名字" prop="userrname">
                <el-input v-model="addForm.userrname"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="userid">
                <el-input v-model="addForm.userid"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="usernumber">
                <el-input v-model="addForm.usernumber"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="userpassword">
                <el-input v-model="addForm.userpassword"></el-input>
                </el-form-item>
                <el-form-item label="个性签名" prop="usersignature">
                <el-input v-model="addForm.usersignature"></el-input>
                </el-form-item>
                <el-form-item label="职位" prop="usersignature">
                <el-input v-model="addForm.controllerposition"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" prop="usersignature">
                <el-input v-model="addForm.controllerdepartment"></el-input>
                </el-form-item>
                <el-form-item label="所属管理单位" prop="usersignature">
                <el-input v-model="addForm.controllerunit"></el-input>
                </el-form-item>
                <el-form-item label="所属管理单位编号" prop="usersignature">
                <el-input v-model="addForm.controllerunitnumber"></el-input>
                </el-form-item>
            </el-form>
        <!-- 底部区 -->
            <el-button class="button3" type="primary" @click="addgUserInfo">确 定</el-button>

        </el-drawer>
      
  </div>
</template>

<script>
export default {
    data() {

         // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        // 合法手机号
        return cb()
      }
      cb(new Error('请输入合法手机号'))
    }

      return {
        pdrawer: false,
        gdrawer: false,

        // 添加用户的表单数据
        addForm: {
            useraccount: '',
            userrname: '',
            userid: '',
            usernumber: '',
            userpassword: '',
            userwallet: '',
            usersignature: '',
            controllerposition: '',
            controllerdepartment: '',
            controllerunit: '',
            controllerunitnumber: '',
            state: 'true'

        },

        // 添加表单的验证规则对象
        addFormRules: {
            useraccount: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 10, message: '账号的长度在3~10个字符之间', trigger: 'blur' }
            ],
            userrname: [
            { required: true, message: '请输入名字', trigger: 'blur' },
            { min: 1, max: 20, message: '名字的长度在1~20个字符之间', trigger: 'blur' }
            ],
            userid: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { min: 18, max: 18, message: '身份证号的长度为18位', trigger: 'blur' }
            ],
            usernumber: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '手机号的长度在11个字符', trigger: 'blur' },
            { validator: checkMobile, trigger: 'blur' }
            ],
            userpassword: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 16, message: '手机号的长度在3~16个字符之间', trigger: 'blur' }
            ]
        },
      }
    },
    methods: {

        //添加普通用户
        addpUserInfo() {
            this.$refs.addFormRef.validate(valid => {
                if (valid) {
                    this.postRequest('/user',this.addForm).then(resp => {
                        // if (resp.code==201){
                        //     return true
                        // }else {
                        //     this.$message.error('您输入的账号已被使用！')
                        // }
                    })
                } else {
                    this.$message.error('请输入必要信息！')
                    return false
                }
            })
        },

        //添加管理者用户
        addgUserInfo() {
            this.$refs.addFormRef.validate(valid => {
                if (valid) {
                    this.postRequest('/controller',this.addForm).then(resp => {
                        // if (resp.code==201){
                        //     return true
                        // }else {
                        //     this.$message.error('您输入的账号已被使用！')
                        // }
                    })
                } else {
                    this.$message.error('请输入必要信息！')
                    return false
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.main1 {
    height: 100%;
    width: 100%;
    background-color: rgb(205, 214, 214);
    // position: absolute;
    // margin-top: 30%;
    // margin-left: 45%;
    // background-size: cover;
}

.el-button1 {
    color:rgba(50, 52, 52, 0.653);
    float: left;
    padding-left: 5%;
    margin-top: 0%;
}

.el-button2 {
    color:rgba(50, 52, 52, 0.653);
    float: left;
    padding-left: 20%;
    margin-top: 0%;
}

.drawer {
    width: 100%;
}

.span {
    margin-left: 45%;
}

.el-card {
    height: 200px;
    width: 300px;
    position: absolute;
    margin-top: 20%;
    margin-left: 40%;
    background-color: rgba(207, 202, 181, 0.308);
}

.el-link {
    margin-top: 15%;
    float: right;
    background-color: rgba(127, 255, 159, 0.142);
}

.el-input {
    width: 80%;
}

.button3 {
    margin-left: 70%;
    float: left;
}

</style>>
